import React, { Component } from "react";
import { inject, observer } from "mobx-react";

@inject("apple")
@observer
class AppleList extends Component {
    render() {
        const { storedApples,appleEat} = this.props.apple
        return <div className="list-box">
            <ul className="apple-list">
                {storedApples.map((apple) => {
                    return (
                        <li className="list-item" key={apple.appleId}>
                            <img className="item-img" src="http://www.miaojiangjiang.com:3000/images/apple.png" alt="苹果.png" />
                            <div className="item-info">
                                <span className="item-title">红苹果 - {apple.appleId}号</span>
                                <span className="item-weight">{apple.weight} 克</span>
                            </div>
                            <button onClick={()=>appleEat(apple.appleId)} className="eat-button">吃掉</button>
                        </li>
                    )
                })}
            </ul>
        </div>
    }
}
export default AppleList